{% extends "base.html" %}
{% block title %}基础设置{% endblock %}
{% block head %}
    {{ super() }}

<script>
var begindate=1

function initVM(config) {
	 var   vm = new Vue({
		el: '#form-config',
		data: config,
		methods: {
			submit: function (event) {
				event.preventDefault();
                if (! this.kindergarten.trim()) {
                    return alert('请输入幼儿园名称');
                }
				
       			postJSON('/api/config/edit',{
				kindergarten:this.kindergarten,
				foodcosts:this.foodcosts,
				article:this.article,
				tuition:this.tuition,
				bedding:this.bedding,
				test:this.test,
				month_start:this.month_start,
				discount:this.discount,
				}, function (err) {
					if (err) {
						showError(err);
					}
					else {
						return location.assign('/config');
					}
				});
			}
		}
	});
};


function initVM1(data) {
    vm1 = new Vue({
        el: '#special_charge',
        data: {
		    page:data.page,
            charges: data.charge,
			chargename:'',
			class_select:'',
			month:'',
			charge:'',
            },
        methods: {
		    submit: function (event) {			    
				event.preventDefault();
                if (! this.chargename.trim()) {
                    return alert('请输入收费项目名称！');
                } 						
                if (! this.class_select.trim()) {
                    return alert('请选择班级！');
                }
				var  reg= /^\d+(\.\d+)?$/;
				if (! this.charge |! reg.test(this.charge)) {
                    return alert('请输入学费,学费为数字！');
                }				
                if (! this.month.trim()) {
                    return alert('请选择缴费月份！');
                }
				postJSON('/api/special_charge/add',{
					chargename:this.chargename,
					month:this.month,
					class_select:this.class_select,
					charge:this.charge,
				}, function (err, r) {
					if (err) {
						return alert(err.message || err.error || err);
					}
					else {
						    return vm1.reload();;
					}
				});
				},		
		    reload:function(index){
			    event.preventDefault();
				getJSON('/api/config', {
					page:index,
				}, function (err, results) {
					if (err) {
						return fatal(err);
					}
					for (i in results.charges.charge){
						date=new Date(parseInt(results.charges.charge[i].month) * 1000)
						year=date.getFullYear()
						month=date.getMonth()+1
						results.charges.charge[i].month=year+'年'+month+'月'
					}
					
					vm1.charges=results.charges.charge;
					vm1.page=results.charges.page
				});
		    },
            previous: function () {
                this.reload(this.page.page_index - 1);
            },
            next: function () {
                this.reload(this.page.page_index + 1);
            },			
					

            delete: function (charge) {
                if (confirm('确认要删除“' + charge.chargename + '”的缴费项目?')) { 
                    url=('/api/special_charge/delete/'+charge.id +'')
					postJSON(encodeURI(url), function (err, r) {
                        if (err) {
                            return alert(err.message || err.error || err);
                        }
                        vm1.reload();
                    });
                };
            }
        },
    });
}


$(function () {
 	    getJSON('/api/config', function (err,results) {
            if (err) {
                return  (err);
            }
            initVM(results.config);	
			for (i in results.charges.charge){
			    date=new Date(parseInt(results.charges.charge[i].month) * 1000)
			    year=date.getFullYear()
			    month=date.getMonth()+1
				results.charges.charge[i].month=year+'年'+month+'月'
			}
			
            initVM1(results.charges);	
			x=document.getElementById("class_select");
			classes=results.k_classes
			for(var i=0;i<classes.length;i++){
				v = classes[i].id; //value
				name = classes[i].name;
				opt = new Option(name,v); 
				x.options.add(opt);
				}
				
			x=document.getElementById("month");
			var date=new Date()
			year=date.getFullYear()
			now_date=date.getDate()
			if (now_date>begindate){month=date.getMonth()-1} 
			else {month=date.getMonth()-2}
			for(var i=0;i<4;i++){
				month=month+1
				if (month==12){year=year+1;month=1;}
				srt_month=year+'年'+month+'月'	
				srt_date_begin=year+'-'+month+'-'+begindate+' 00:00:00'
				v = js_strto_time(srt_date_begin); //value,,本月起始的时间戳
				name =srt_month;
                opt = new Option(name,v);
				x.options.add(opt);
				}
        });
});
//时间转换为时间戳
function js_strto_time(str_time){
    var new_str = str_time.replace(/:/g,'-');
    new_str = new_str.replace(/ /g,'-');
    var arr = new_str.split("-");
    var datum = new Date(Date.UTC(arr[0],arr[1]-1,arr[2],arr[3]-8,arr[4],arr[5]));
    return strtotime = datum.getTime()/1000;
}
function js_date_time(unixtime) {
    var timestr = new Date(parseInt(unixtime) * 1000);
    var datetime = timestr.toLocaleDateString().replace(/年|月/g, "-").replace(/日/g, " ");
    return datetime;
}
</script>
{% endblock %}

{%block panel%}
<div class="tm-panel  uk-panel uk-panel-box  ">                        
	<div class="uk-panel-title">系统管理</div>
	<div class="uk-panel-li"><a href="/users">用户管理</a></div> 
	<div class="line"></div>
	<div class="uk-panel-li"><a href="/password">修改密码</a></div>
	<div class="line"></div>
	<div class="uk-panel-li"><a href="/config">基础设置</a></div> 
	<div class="line"></div>
</div>
{%endblock%}
					
{% block content %}
<div class="tit"><a href="/">主页 </a>  》 <a href="/">系统管理 </a></div>
<div class="divmain-title">基础设置</div>				

<ul class="uk-tab" data-uk-tab="{connect:'#tab-content'}">
	<li class="uk-active"><a href="#">基础设置</a></li>
	<li ><a href="#">特别收费</a></li>
</ul>

<ul id="tab-content" class="uk-switcher uk-margin">

<li class="uk-active">
<div  class="divmain" id="form-config" >
<form  v-on="submit: submit" class="uk-form uk-form-horizontal">
	<div class="uk-form-row ">
		<label class="uk-form-label" for="kindergarten">幼儿园名称:</label>
		<div class="uk-form-controls">
			<input v-model="kindergarten" id="kindergarten" type="text"  placeholder="幼儿园名称">
		</div>
	</div> 	

	<div class="uk-form-row ">
		<label class="uk-form-label">月开始日期:</label>
		<div class="uk-form-controls">
			<input v-model="month_start" type="text" maxlength="50" placeholder=">月开始日期" class="">
		</div>
	</div>

	<div class="uk-form-row ">
		<label class="uk-form-label">学费标准:</label>
		<div class="uk-form-controls">
			<input v-model="tuition" type="text" maxlength="50" placeholder="入学押金" class="">
		</div>
	</div>	
	<div class="uk-form-row ">
		<label class="uk-form-label">年收费折扣:</label>
		<div class="uk-form-controls">
			<input v-model="discount" type="text" maxlength="50"  class="">
		</div>
	</div>	
	<div class="uk-form-row ">
		<label class="uk-form-label">每月餐费标准:</label>
		<div class="uk-form-controls">
			<input v-model="foodcosts" type="text" maxlength="50" placeholder="饭费标准" class="">
		</div>
	</div>
	
    <div class="uk-form-row ">
		<label class="uk-form-label">入学杂费:</label>
		<div class="uk-form-controls">
			<input v-model="article" type="text" maxlength="50" placeholder="" class="">
		</div>
	</div>
	<div class="uk-form-row ">
		<label class="uk-form-label">床品费:</label>
		<div class="uk-form-controls">
			<input v-model="bedding" type="text" maxlength="50" placeholder="" class="">
		</div>
	</div>
		<div class="uk-form-row ">
		<label class="uk-form-label">体验费:</label>
		<div class="uk-form-controls">
			<input v-model="test" type="text" maxlength="50" placeholder="" class="">
		</div>
	</div>
	<div class="divbutton">
	<button type="submit" class="uk-button uk-button-primary"> 确定 </button>
	</div>

</form>	
</div>


</li>

<li >	
<div id="special_charge" class="div-pagemain" >		


	<form v-on="submit: submit" class="uk-form uk-form-horizontal">

	<div class="uk-form-row ">
		<label class="uk-form-label">收费项目名称:</label>
		<div class="uk-form-controls">
			<input v-model="chargename" type="text" maxlength="50" placeholder="" class="">
		</div>
	</div>
	
	<div class="uk-form-row ">
		<label class="uk-form-label">收费标准:</label>
		<div class="uk-form-controls">
			<input v-model="charge" type="text" maxlength="50"  class="">
		</div>
	</div>
	
	<div class="uk-form-row ">
		<label class="uk-form-label">班级名称:</label>
		<div class="uk-form-controls ">
			<select v-model="class_select" id="class_select" v-on="change:reload({{ page_index }})">
				<option value=""></option>
			</select>
		</div>
	</div>	
	

	<div class="uk-form-row ">
		<label class="uk-form-label">月份:</label>
		<div class="uk-form-controls ">
			<select v-model="month" id="month" v-on="change:reload({{ page_index }})">
			<option value=""></option>
			</select>
		</div>
	</div>	
	
	<div class="divbutton">
	<button type="submit" class="uk-button uk-button-primary"> 确定 </button>
	</div>

	</form>
<hr>
	
	<div class="divmain-title">收费项目</div>		
	<div class="divcontainer uk-overflow-container">
      
        <table class="uk-table uk-table-striped  uk-text-nowrap">
            <thead>
                <tr>
                    <th class="">收费项目名称</th>
                    <th class="">班级名称</th>
                    <th class="">收费月份</th>
					<th class="">金额</th>									
					<th class="">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-repeat="charge: charges" >
                    <td>
                        <div   v-text="charge.chargename"></div>
                    </td>
                    <td>
                        <div   v-text="charge.class_name"></div>
                    </td>
                    <td>
                        <div   v-text="charge.month"></div>
                    </td>
					<td>
                        <div   v-text="charge.charge "></div>
                    </td>

					 
                    <td>                        
						<a href="#0" v-on="click:delete(charge)">删除<i class=""></i>

                    </td>
                </tr>
            </tbody>
        </table>
		</div>	
		
		<div class="divpage uk-width-1-1 uk-text-center">
				<ul class="uk-pagination">
                <li v-if="! page.has_previous" class="uk-disabled"><span><i class="uk-icon-angle-double-left"></i></span></li>
                <li v-if="page.has_previous"><a v-on="click: previous()" href=""><i class="uk-icon-angle-double-left"></i></a></li>
                <li class="uk-active"><span v-text="page.page_index"></span></li>
                <li v-if="! page.has_next" class="uk-disabled"><span><i class="uk-icon-angle-double-right"></i></span></li>
                <li v-if="page.has_next"><a v-on="click: next()" href=""><i class="uk-icon-angle-double-right"></i></a></li>
            </ul>
        </div>
 </div>

</li>
				
</ul>

{%endblock%}
             